<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="form">
            <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
                <u-form-item :label-position="labelPosition" label="手机号" prop="mobile" label-width="150">
                    <u-input placeholder="请输入手机号" v-model="model.mobile" type="text"></u-input>
                </u-form-item>
                <u-form-item :label-position="labelPosition" label="昵称" prop="nickname" label-width="150">
                    <u-input placeholder="请输入昵称" v-model="model.nickname" type="text" autoComplete="off"></u-input>
                </u-form-item>
				<u-form-item :label-position="labelPosition" label="密码" prop="password" label-width="150">
					<u-input :password-icon="true" type="password" v-model="model.password" autoComplete="off" placeholder="请输入密码"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="确认密码" label-width="150" prop="rePassword">
					<u-input type="password" v-model="model.rePassword" placeholder="请确认密码"></u-input>
				</u-form-item>
            </u-form>
            <u-button :disabled="!isCanSubmit" :style="[inputStyle]" class="button" type="button" @click="submit">注册</u-button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				isCanSubmit: true,
                labelPosition: 'left',
                errorType: ['message'],
                model: {
					mobile: '18888888888',
					nickname: '永远开心',
					password: '123456',
					rePassword: '123456',
				},
                rules: {
                    mobile: [
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: ['change','blur'],
                        },
                        {
                            validator: (rule, value, callback) => {
                                // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                                return this.$u.test.mobile(value);
                            },
                            message: '手机号码不正确',
                            // 触发器可以同时用blur和change，二者之间用英文逗号隔开
                            trigger: ['change','blur'],
                        }
                    ],
                    nickname: [
                        {
							required: true,
							message: '请输入昵称',
							trigger: 'blur' ,
						},
						{
							min: 2,
							max: 6,
							message: '昵称长度在2到6个字符',
							trigger: ['change','blur'],
						}
                    ],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['change','blur'],
						},
						// {
						//  // 正则不能含有两边的引号
						//  pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
						//  message: '需同时含有字母和数字，长度在6-12之间',
						//  trigger: ['change','blur'],
						// }
						{
							min: 6,
							max: 16,
							message: '密码长度在6到16个字符',
							trigger: ['change','blur'],
						},
					],
					rePassword: [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
                }
            }
        },
        onLoad() {

        },
		computed: {
			inputStyle() {
				let style = {};
				if (this.model.mobile) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			}
		},
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
        methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.getRegist()
					} else {
						console.log('验证失败');
					}
				});
			},
            async getRegist() {
                this.isCanSubmit = false
                let res = await this.$u.api.getRegister({mobile:this.model.mobile, nickname:this.model.nickname, password: this.model.password})
                if (res != '') {
                    setTimeout(() => {
						this.$u.route({
							type: 'back',
							animationType: 'pop-out'
						})
                    }, 1000)
                } else {
                    setTimeout(() => {
                        this.isCanSubmit = true
                    }, 2000)
                }
            }
        }
    }
</script>

<style lang="scss">
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }
    .form {
        margin-top: 80rpx auto;
        width: 580rpx;
		.button {
			margin-top: 20px;
			background-color: rgb(253, 243, 208);
			color: $u-tips-color;
			border: none;
			&::after {
				border: none;
			}
		}
    }
    
</style>